<template>
  <el-dialog
    :width="800"
    v-model="formVisible"
    title="新增抽查事项"
    @close="formCancel"
  >
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-row :gutter="40" style="width: 100%">
        <el-col :span="24">
          <el-form-item label="抽查事项名称" prop="objectName">
            <el-input v-model="form.itemName" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="save()" :loading="loading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { addOrUpd } from '@/api/spotCheck/spotCheck'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['reload'])

const ruleFormRef = ref()

const form = reactive({
  itemName: ''
})

const rules = ref({
  itemName: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const formVisible = ref(false)

const loading = ref(false)
const save = () => {
  form.value.validate((valid) => {
    if (!valid) return
    let data = form
    loading.value = true
    addOrUpd(data)
      .then((res) => {
        ElMessage.success('新增成功')
        emit('reload')
      })
      .finally(() => {
        loading.value = false
      })
  })
}

const formCancel = () => {
  formVisible.value = false
}
const show = () => {
  formVisible.value = true
}

defineExpose({ show })
</script>

<style scoped></style>
